<template>
  <!--工作台卡片详情文件tab组件-->
  <div class="workstage_file_tabs">
    <div class="tabs_header">
      <el-tabs v-model="activeName" class="title_tab">
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item.label"
          :name="item.name">
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tabs_content">
      <div v-if="activeName === tabsList[0].name" class="tab_content_item">
        <info-grid
          style-type="grey"
          :row-size="2"
          :items="gridItems"
          :infoData="workstage"
        ></info-grid>
      </div>
      <div v-if="activeName === tabsList[1].name" class="tab_content_item">
        <div class="tab_file_item">
          <work-stage-tech-file :techProcList="techProcList" :noFile="'暂无文件'"></work-stage-tech-file>
        </div>
      </div>
      <div v-if="activeName === tabsList[2].name" class="tab_content_item">
        <div class="tab_file_item">
          <work-stage-tech-file :techProcList="[]" :noFile="'暂无文件'"></work-stage-tech-file>
        </div>
      </div>
      <div v-if="activeName === tabsList[3].name" class="tab_content_item">
        <div class="table_panel table_container tab_pane">
          <el-table
            :data="workorderWorkstageMaterialList"
            border
            height="411"
            style="width: 100%; margin-top: 20px">
            <el-table-column
              align="center"
              prop="sort"
              label="工序序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="workstageName"
              label="工序名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="workorderTecProcNumber"
              label="工艺规程编号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="drawingNumber"
              label="图号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="materialNumber"
              label="物料编码">
            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物料名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="materialTypeLabel"
              label="物料类型">
            </el-table-column>
            <el-table-column
              align="center"
              prop="quantity"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="activeName === tabsList[4].name" class="tab_content_item">
        <div class="table_panel table_container tab_pane">
          <el-table
            :data="workorderWorkstageResourceList"
            border
            height="411"
            style="width: 100%; margin-top: 20px">
            <el-table-column
              align="center"
              prop="sort"
              label="工序序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="workstageName"
              label="工序名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="resourceNumber"
              label="资源编号">
            </el-table-column>
            <el-table-column
              prop="resourceName"
              label="资源名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="resourceTypeLabel"
              label="资源类型">
            </el-table-column>
            <el-table-column
              align="center"
              prop="workorderTecProcNumber"
              label="工艺规程编号">
            </el-table-column>
            <el-table-column
              prop="quantity"
              align="center"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="activeName === tabsList[5].name" class="tab_content_item">
        <div class="tab_file_item">
          <work-stage-tech-file v-if="activeName === tabsList[5].name" :techProcList="uploadDeviceFileHistorie" :noFile="'暂无文件'"></work-stage-tech-file>
        </div>
      </div>
      <div v-if="activeName === tabsList[6].name" class="tab_content_item">
        <div class="tab_file_item">
          <work-stage-tech-file  v-if="activeName === tabsList[6].name" :techProcList="otherFile" :noFile="'暂无文件'" :hasSearch="true" :fileTypeList="fileTypeList"></work-stage-tech-file>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WorkStageTechFile from '@/components/WorkStageTechFile/WorkStageTechFile'
export default {
  name: 'WorkstageFileTabs',
  props: {
    viewTechnologyFile: Object, // 工序文件对象
    workstage: Object, // 当前工序基本信息
    gridItems: Array, // 工序基本信息grid网格字段
    tabsList: Array // tab列表数据
  },
  components: {
    WorkStageTechFile
  },
  data() {
    return {
      activeName: 'first', // tab当前选择name值
    }
  },
  computed: {
    // 文档类型
    fileTypeList() {
      return this.$store.state.dict.FileType.labels || []
    },
    // 物料清单
    workorderWorkstageMaterialList() {
      return this.viewTechnologyFile.workstageMateria || []
    },
    // 资源清单
    workorderWorkstageResourceList() {
      return this.viewTechnologyFile.workstageResource || []
    },
    // 工艺清单
    techProcList() {
      return this.viewTechnologyFile.techProc || []
    },
    // 设备文件
    uploadDeviceFileHistorie() {
      return this.viewTechnologyFile.uploadDeviceFileHistorie || []
    },
    // 其他文件
    otherFile() {
      return this.viewTechnologyFile.otherFile || []
    }
  }
}
</script>

<style lang="less">
  .workstage_file_tabs{
    height:100%;
    .table_container{
      padding: 0;
    }
    /*Tab Header头部*/
    .tabs_header{
      width: 100%;
      height: 50px;
      position: relative;
      &::after{
        content:'';
        display: block;
        width: 100%;
        position: absolute;
        left:0;
        bottom: 0;
        border-bottom: 1px solid #eee;
      }
    }
    .title_tab {
      display: flex;
      height: 100%;
      padding-left: 20px;
      .el-tabs__header{
        margin: 0;
        height: 100%;
      }
      .el-tabs__nav-wrap{
        height: 100%;
        &::after{
          display: none;
        }
        .el-tabs__nav{
          height: 100%;
        }
        .el-tabs__nav-scroll{
          height: calc(100% - 1px);
        }
        .el-tabs__item{
          height: 100%;
          line-height: 56px;
        }
      }
    }
    /*Tab Content内容*/
    .tabs_content{
      .tab_content_item{
        padding: 20px;
        .tab_file_item{
          height: 411px;
          padding-bottom: 2px;
        }
        .info_grid_item:last-child{
          flex: 0 0 100%!important;
          .info_grid_label{
            flex: 0 0 calc(20% - 0.5px)!important;
          }
        }
      }
    }
    .el-table--border{
      margin-top: 0!important;
    }
  }
</style>
